<template>
<div class="container">
    <h2 :class="curentColor">这里是标题</h2>
    <button @click="changeColor">点击我改变颜色</button>
</div>
</template>

<script setup>
import { ref } from 'vue'

const colors = ['red', 'green', 'blue', 'orange', 'purple'];
const curentColor = ref(colors[0]);

const changeColor = () => {
    const randomIndex = Math.floor(Math.random() * colors.length); //0-4
    curentColor.value = colors[randomIndex]
}

</script>

<style scoped>
.container{
    background-color: rgb(177, 177, 177);
    border-radius: 15px;
    padding:10px;
    margin:10px;
}
.red {
    color:red;
}
.green{
    color:green;
}
.blue{
    color:blue;
}
.orange{
    color:orange;
}
.purple{
    color:purple;
}
</style>